<template>
  <div>
    <Header></Header>
    <section>
      <Routers></Routers>
      <div id="section" class="main">
        <div class="common_header">
          <span class="common_header_tip">研发活动管理</span>
          <button class="common_header_btn" @click="linkTOadd">添加</button>
        </div>
        <ul class="common_project_ul">
          <li class="common_projectLIST" @click="linkTOdetail(item.id)" v-for="(item, index) in projet_list">
            <p class="common_projectLIST_projetName">{{textEach(item.pro_name,20)}}</p>
            <p class="common_projectLIST_projetTime">起止时间：{{item.pro_start}}至{{item.pro_end}}</p>
            <div class="common_projectLIST_content">
              <div class="common_projectLIST_LOGO"></div>
              <div class="common_projectLIST_textBOX">
                <p class="common_projectLIST_text">技术领域：{{textEach(item.tec_id.name,12)}}</p>
                <p class="common_projectLIST_text">技术来源：{{item.tec_source}}</p>
                <p class="common_projectLIST_text">知识产权编号：{{item.know_sn}}</p>
                <p class="common_projectLIST_text">研发费用总预算(元)：{{item.pro_total}}</p>
              </div>
            </div>
            <i class="iconfont icon-guanbi common_projectLIST_closeBTN" @click.stop="del($event,item.id)"></i>
          </li>
        </ul>
        <!--分页-->
        <ul class="pagination" >
          <li v-show="current != 1" @click="current-- && goto(current)" ><a href="#">上一页</a></li>
          <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
            <a href="#" >{{index}}</a>
          </li>
          <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)"><a href="#" >下一页</a></li>
        </ul>

        <!--删除确认框 -->
        <div class="tankuang_box" v-if="delISshow">
          <div class="tankuang">
            <p class="tankuangMSG">确认删除吗？</p>
            <div class="tankuang_btn_box">
              <button class="tankuang_ok_btn" @click="delBTN">确认</button>
              <button class="tankuang_ok_btn" @click="cancelDel">取消</button>
            </div>
          </div>
        </div>

      </div>
    </section>
  </div>
</template>

<script>
  import Routers from '@/template/routers.vue'
  import Header from '@/template/common_header.vue'
  import lu from '@/assets/public.js'
  export default {
    name: 'rdManagement',
    components: {
      Routers,
      Header
    },
    data () {
      return {
//        project_name:'企业走出去跨文化大数据平台建设',
//        project_time:'2016.10-2017.2',
//        project_jishulingyu:'科研',
//        project_jishulaiyuan:'企业资源计划(ERP)软件',
//        project_num:12345678954212,
//        project_money:2002143.52,
        projet_list:[],
        delISshow:false,
        delID:null,
        /****分页****/
        current:1,
        showItem:5,
        allpage:1
      }
    },
    computed:{
      pages:function(){
        let pag = [];
        if( this.current < this.showItem ){ //如果当前的激活的项 小于要显示的条数
          //总页数和要显示的条数那个大就显示多少条
          let i = Math.min(this.showItem,this.allpage);
          while(i){
            pag.unshift(i--);
          }
        }else{ //当前页数大于显示页数了
          let middle = this.current - Math.floor(this.showItem / 2 ),//从哪里开始
            i = this.showItem;
          if( middle >  (this.allpage - this.showItem)  ){
            middle = (this.allpage - this.showItem) + 1
          }
          while(i--){
            pag.push( middle++ );
          }
        }
        return pag
      }
    },
    mounted: function() {
      this.axios.get('/index/pro_list?page=1').then((res)=>{
        if(res.data.code==1){
          let datas = res.data.data
//          this.project_name = lu.textEach(datas.pro_name,11)
          this.projet_list = datas
          this.allpage = res.data.last_page
        }
      })
    },
    methods: {
      /*分页*/
      goto (index) {
        this.current = index;
        //这里可以发送ajax请求
        this.axios.get('/index/pro_list?page='+this.current).then((res)=>{
          if(res.data.code==1){
            this.projet_list = res.data.data
            this.allpage = res.data.last_page
          }
        })
      },
      textEach (str,n) {
        return lu.textEach(str,n)
      },
      /*删除*/
      del (e,id) {
        e.preventDefault()
        this.delID = id
        this.delISshow = true
      },
      delBTN () {
        this.axios.post('/index/del_pro',{
          id:this.delID
        }).then((res)=>{
          if(res.data.code==1){
            this.axios.get('/index/pro_list?page='+this.current).then((res)=>{
              if(res.data.code==1){
                this.projet_list = res.data.data
                this.allpage = res.data.last_page
              }
            })
            this.delISshow = false
          }
        })
      },
      /*基础操作*/
      cancelDel () {
        this.delID = null
        this.delISshow = false
      },
      linkTOdetail(id){
//        this.$router.push('/rdManagement_detail/'+id)
        this.$router.push({
          path:'/rdManagement_add',
          name:'rdManagement_add',
          params:{
            id:id
          }
        })
      },
      linkTOadd () {
        this.$router.push('/rdManagement_add')
      }
    }
  }
</script>

<style scoped>
  @import '../../assets/public.css';
  @import '//at.alicdn.com/t/font_749860_je5eki3tevb.css';



</style>
